<template>
  <div>
    <!-- 轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in images" :key="item.id">
        <img v-lazy="item.image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格 -->
    <van-grid square :column-num="3">
      <van-grid-item
        v-for="item in list"
        :key="item.id"
        :icon="item.icon"
        :text="item.name"
        @click="tolist"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      list: []
    };
  },
  mounted() {
    this.getDataImages();
    this.getDataGrid();
  },
  methods: {
    async getDataImages() {
      var res = await this.$http.get("https://locally.uieee.com/slides");
      console.log(res);
      this.images = res.data;
    },
    async getDataGrid(){
        var res = await this.$http.get("https://locally.uieee.com/categories");
        console.log(res);
        this.list = res.data
    },
    tolist(){
        
    }
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 200px;
}
</style>